<template>
    <div class="hunter" :class="{fix:isFixed}">
        <nav class="hunter-nav" v-show="isYiji">
            <span class="city" @touchstart="showAllc">{{currCity}}</span>
            <div class="tools">
                <router-link v-show="!isLogin" to="/hunter/login">登录</router-link>
                <router-link 
                    v-show="isLogin" 
                    to="/hunter/person"
                >
                    <img src="/img/avatar/mr.jpg" class="user-img">
                    <span class="account">{{username|account}}</span>
                </router-link>
                <span @touchstart="showCarttag"></span>
            </div>
        </nav>

        <Hloading v-if="isLoading"></Hloading>

        <router-view></router-view>

        <transition name="aniCity">
            <Allcity v-show="isShowAllc"></Allcity>
        </transition>

        <transition name="aniCart">
            <Carttag v-show="isShowCarttag"></Carttag>
        </transition>
    </div>
</template>

<script>
import Hloading from '../components/Hloading.vue';
import {mapState} from 'vuex';
import Allcity from '../components/Allcity.vue';
import Carttag from '../components/Carttag.vue';
export default {
    data:function(){
        return {
            isYiji:true,
            isShowCarttag:false,
            username:''
        }
    },
    mounted:function(){
        var nCount = this.$route.path.split("/").length - 1;
        if (nCount != 1) {
            this.isYiji = false;
        }else{
            this.isYiji = true;
        }
        if(localStorage.getItem("userInfo")){
            this.username = JSON.parse(localStorage.getItem("userInfo")).tel;
            // console.log(this.username);
            this.$store.commit("setIsLogin",true);
        }else{
            this.$store.commit("setIsLogin",false);
        }
        
    },
    watch:{
        $route:function(nv,ov){
            var nCount = nv.path.split("/").length - 1;
            if(nCount>1){
                this.isYiji = false;
            }else{
                this.isYiji = true;
            }
        }
    },
    components:{
        Allcity,
        Hloading,
        Carttag,
    },
    computed:{
        
        ...mapState([
            "isShowAllc",
            "currCity",
            "isLoading",
            "hhomedata",
            "isFixed",
            "changepointer",
            "isLogin"
        ])
    },
    methods:{
        showAllc:function(){
            this.$store.commit("setShowAllc",true);
            // 使home页面不可点击
            this.$store.commit("setChangepointer",true);
            // 使首页fixed
            this.$store.commit("setIsFixed",true);
        },
        showCarttag:function(){
            this.isShowCarttag = !this.isShowCarttag;
            if(this.isShowCarttag){
                // 使首页fixed
                this.$store.commit("setIsFixed",true);
                // 使home页面不可点击
                this.$store.commit("setChangepointer",true);

            }else{
                this.$store.commit("setIsFixed",false);
                this.$store.commit("setChangepointer",false);
            }
        }
    },
    created:function(){
        if(!this.hhomedata){
            this.$store.commit("setIsLoading",true);
        }
    }
}
</script>

<style scoped>
    .hunter{
        width: 100vw;
        height: 100vh;
        z-index: 1;
    }
    .hunter-nav{
        color: #4a4a4a;
        font-size: 14px;
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: space-between;
        padding:0 20px;
        background-color: #FFFFFF;
    }
    .fix{
        overflow: hidden;
    }
    .city{
        line-height: 44px;
        font-size: 15px;
        font-weight: 700;
        position: relative;
        padding-right: 12px;
    }
    .city::after{
        content: "";
        position: absolute;
        top: 50%;
        right:0;
        transform: translateY(-50%);
        width: 6px;
        height: 8px;
        background-size: cover;
        background-image: url("/static/img/cityafter.png");
    }
    .tools{
        /*width:105px;*/
        display: flex;
        align-items: center;
    }
    .tools a{
        font-size: 12px;
    }
    .tools>span{
        display: inline-block;
        width: 19px;
        height: 19px;
        margin-left: 20px;
        background-image: url("/static/img/index.png");
        background-size: cover;
    }
    .user-img{
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-size: cover;
        background-position: 50%;
    }
    .account{
        position: relative;
        bottom: 6px;
    }

    /*选择城市组件动画*/
    .aniCity-enter,.aniCity-leave-to {
        transform: translate(0, -100%);
    }
    .aniCity-enter-active,
    .aniCity-leave-active {
        transition: all 0.6s;
    }
    .aniCity-enter-to,
    .aniCity-leave {
        transform: translate(0, 0);
    }

    /*选择版块标签组件动画*/
    .aniCart-enter,
    .aniCart-leave-to{
        transform: translate(0, -100%);
        opacity: 0;
    }
    .aniCart-enter-active,
    .aniCart-leave-active {
        transition: all 0.6s;
    }
    .aniCart-enter-to,
    .aniCart-leave {
        transform: translate(0, 0);
        opacity: 1;
    }
</style>